<template>
  <ModalDialog v-model:visible="isShowDia" secClass="form_card_sec" title="管理员设置">
    <template #content>
      <div class="form_body">
        <div class="add_box">
          <!-- 管理员列表 -->
          <div v-show="type === 'one'" class="admin_box">
            <n-flex class="add_admin_box button" justify="center" @click="type = 'two'">
              <iconpark-icon icon-id="gerentianjiaicon" color="#fff" size="1.5em"></iconpark-icon>
              <n-flex align="center">添加管理员 ({{ adminListObj.total_added_admin }}/{{ adminListObj.add_admin_limit }})</n-flex>
            </n-flex>

            <div class="admin_list_box">
              <div class="nodata" v-if="!adminListObj.adminlist.length" style="padding: 0">
                <Imgt src="/img/wallet/nodata.webp" alt="nodata" />
                <div>{{ t('home_page_nomore_data') }}</div>
              </div>
              <n-flex class="admin_listItem_box" justify="space-between" align="center" v-for="(item, index) in adminListObj.adminlist" :key="index">
                <n-flex class="ad_list_l">
                  <Imgt :src="item.head_photo_url"/>
                  <div>
                    <div>{{ item.username }} 管理员</div>
                    <span class="vip_box">VIP{{ item.level }}</span>
                  </div>
                </n-flex>
                <div class="ad_list_r button_color button" @click="setAdminAc('cancel', item)">
                  {{t('取消')}}
                </div>
              </n-flex>
            </div>
          </div>

          <!-- 添加管理员 -->
          <div v-show="type === 'two'" class="sea_admin_box">
            <n-flex class="sea_top" justify="space-between" align="center">
              <div class="input_box">
                <n-input v-model:value="seaName" :placeholder="t('搜索成员')" @input="handleInput" clearable :bordered="false"/>
              </div>
              <a class="button button_color">搜索</a>
            </n-flex>
            <div class="admin_list_box">
              <n-flex class="admin_listItem_box" justify="space-between" align="center" v-for="(item, index) in infoData.userinfo" :key="index">
                <n-flex class="ad_list_l">
                  <Imgt :src="item.head_photo_url"/>
                  <div>
                    <div>{{ item.username }}</div>
                    <span class="vip_box">VIP{{ item.level }}</span>
                  </div>
                </n-flex>
                <div class="ad_list_r button_color button" @click="setAdminAc('set', item)">
                  {{t('设置')}}
                </div>
              </n-flex>
            </div>
          </div>

        </div>
      </div>
    </template>
  </ModalDialog>
  <!-- 取消和设置管理员 -->
  <ModalDialog v-model:visible="isTipsDia" secClass="form_card_sec" title="提示">
    <template #content>
      <div class="tip_form_body">
        <div class="tips_title"> {{setTxt}} </div>
        <n-flex class="tips_btn" justify="center">
          <a class="button" @click="isTipsDia = false">取消</a>
          <a class="button_color button" @click="addAdminList">确定</a>
        </n-flex>
      </div>
    </template>
  </ModalDialog>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import Imgt from "@/components/Imgt.vue";
import { useI18n } from "vue-i18n";
import ModalDialog from '@/components/ModalDialog.vue';
import { NetPacket } from '@/netBase/NetPacket.ts';
import H5Websocket from '@/net/Net1.ts';
import { MessageEvent2 } from '@/net/MessageEvent2.ts';
import { NetMsgType } from '@/netBase/NetMsgType.ts';
// import { User } from '@/store/user.ts';
// import pinia from '@/store';
// import { storeToRefs } from 'pinia';
import { Message } from '@/utils/discreteApi.ts';
import { returnAvatarUrl } from '@/utils/others.ts';

const { t } = useI18n();
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  clubInfoData: {
    type: Object,
    default: {}
  }
});
const emit = defineEmits(["update:visible"]);
// const UserStore = User(pinia);
// const { roleInfo } = storeToRefs(UserStore);
const isTipsDia = ref(false);
const editData: any = ref({});
const type = ref('one'); // one two
const acType = ref('cancel'); // cancel, set
const setTxt = ref();
const seaName = ref();
const infoData: any = ref({
  club_id: 0,
  club_name: '',
  club_introduction: '',
  totalmember: 0,
  userinfo: [],
})
const adminListObj: any = ref({
  total_added_admin: 0,
  add_admin_limit: 0,
  adminlist: []
})

const isShowDia = computed({
  get: function () {
    return props.visible;
  },
  set: function (value) {
    emit("update:visible", value);
  },
});

// 输入字符串匹配银行
const handleInput = (v: string) => {
  if (v) {
    const newArr: any = [];
    props.clubInfoData.userinfo.map((item: any) => {
      const str = item.username
      const reg = new RegExp(v, 'i')
      const isHas = str.match(reg)
      if (isHas) {
        newArr.push(item)
      }
    })
    infoData.value.userinfo = newArr
  } else {
    infoData.value.userinfo = [...props.clubInfoData.userinfo]
  }
}
const setAdminAc = (type: any, item: any={}) => {
  editData.value = item
  isTipsDia.value = true;
  acType.value = type;
  setTxt.value = type === 'cancel' ? `是否取消 ${item.username} 的管理员` : `是否将 ${item.username} 设置为管理员`;
}

// 管理员列表
const getAdminList = (id: any = 0) => {
  if (!id) {
    id = infoData.value.club_id
  }
  const req: any = NetPacket.req_get_admin_list();
  req.club_id = id || '';
  H5Websocket.sendMessageHandler(req);
}
const getAdminListHandle = (res: any) => {
  console.log('管理员列表--', res)
  // 拼接成员头像
  res.adminlist.forEach((item: any) => {
    item.head_photo_url = returnAvatarUrl(item.head_photo)
  })
  adminListObj.value = res
}
// 设置为管理员, 参数：club_id：俱乐部ID； role_id：玩家 roleid
const addAdminList = () => {
  const id = infoData.value.club_id;
  if (!id) return
  let req: any
  // 取消
  if (acType.value === 'cancel') {
    req = NetPacket.req_del_admin();
  } else { // 设置
    req = NetPacket.req_add_admin();
  }
  req.club_id = id || '';
  req.role_id = editData.value.role_id; // 应该是成员列表的 id
  H5Websocket.sendMessageHandler(req);
}
// 0表示添加成功，1表示该玩家不是俱乐部会员，2表示该玩家已经是管理员，3表示超过管理员设置上限，4表示非该俱乐部的创建者
const getAddAdminHandle = (res: any) => {
  console.log('添加管理员--', res)
  const codeTxt: any = {
    0: t('添加成功'),
    1: t('该玩家不是俱乐部会员'),
    2: t('该玩家已经是管理员'),
    3: t('超过管理员设置上限'),
    4: t('非该俱乐部的创建者'),
  }
  isTipsDia.value = false
  if (res.result === 0) {
    Message.success(codeTxt[res.result]);
    getAdminList()
  } else {
    Message.error(codeTxt[res.result]);
  }
}
// 返回结果：result：0表示取消成功，1表示玩家不是俱乐部会员，2表示该玩家不是管理员，3表示非俱乐部的创建者
const getDelAdminHandle = (res: any) => {
  console.log('删除管理员--', res)
  const codeTxt: any = {
    0: t('取消成功'),
    1: t('该玩家不是俱乐部会员'),
    2: t('该玩家不是管理员'),
    3: t('非该俱乐部的创建者'),
  }
  isTipsDia.value = false
  if (res.result === 0) {
    Message.success(codeTxt[res.result]);
    getAdminList()
  } else {
    Message.error(codeTxt[res.result]);
  }
}


watch(
  () => isShowDia.value,
  (n) => {
    if (n) {
      type.value = 'one'
      getAdminList(infoData.value.club_id);
      MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_get_admin_list, getAdminListHandle);
      MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_add_admin, getAddAdminHandle);
      MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_del_admin, getDelAdminHandle);
    } else {
      MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_get_admin_list, null);
      MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_add_admin, null);
      MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_del_admin, null);
    }
  }
);
watch(
  () => props.clubInfoData,
  (n) => {
    if (n) {
      console.log('######', n)
      infoData.value = JSON.parse(JSON.stringify(n));
    }
  }
);
</script>
<style lang="less" scoped>
@import '@/assets/club.less';
.form_body {
  padding: 20px 12px !important;
  font-size: 16px;
  .admin_box {
    .add_admin_box {
      background: #0D0D29;
      border-radius: 8px;
      height: 76px;
      gap: 5px !important;
      margin-bottom: 16px;
    }
  }
  .admin_list_box {
    max-height: 260px;
    overflow-y: auto;
    .admin_listItem_box {
      background: #212443;
      border-radius: 8px;
      margin-bottom: 12px;
      padding: 14px 20px;
      .ad_list_l {
        gap: 4px !important;
        img {
          width: 52px;
          height: 52px;
          border-radius: 50%;
        }
        .vip_box {
          display: inline-block;
          text-align: center;
          font-size: 12px;
          width: 50px;
          height: 20px;
          line-height: 20px;
          background: #373A5F;
          color: #AFB6BD;
          border-radius: 4px;
        }

      }
      .ad_list_r {
        width: 92px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
    }
  }
  .sea_admin_box {
    .sea_top {
      gap: 12px !important;
      margin-bottom: 16px;
      .input_box {
        flex: 1;
        :deep(.n-input) {
          background: #0D0D29;
          border-radius: 8px;
          .n-input__input-el {
            height: 40px;
          }
        }
      }
      a {
        width: 80px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
    }
  }

}
</style>
